<template>
  <div style="padding: 20px">
    <div
      style="
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px 0 20px;
      "
    >
      <!-- 搜索框 -->
      <div>
        <el-autocomplete
          size="large"
          v-model="city"
          :fetch-suggestions="querySearchAsync"
          placeholder="输入部署城市名称"
          @select="handleSelect"
        />
      </div>

      <!-- 右侧新增按钮 -->
      <div style="display: flex">
        <el-upload
          style="margin-right: 13px"
          class="upload-demo"
          action="http://localhost:9600/common/monitor/import"
          accept=".xlsx"
          :on-success="handleExcelImportSuccess"
        >
          <el-button type="success"
            ><el-icon style="margin-right: 5px"><Download /></el-icon
            >导入</el-button
          >
        </el-upload>

        <el-button type="warning" @click="handleExport"
          ><el-icon style="margin-right: 5px"><Upload /></el-icon
          >导出</el-button
        >
      </div>
    </div>

    <!-- 表格数据展示部分 -->
    <div style="padding: 20px">
      <el-table
        show-overflow-tooltip="true"
        :data="tableData"
        style="width: 100%"
        height="auto"
        v-loading="dataLoading"
        element-loading-text="数据加载中..."
      >
        <el-table-column fixed prop="createTime" label="上传时间" width="220" />
        <el-table-column prop="machineId" label="机器编号" width="230" />
        <el-table-column prop="location" label="部署位置" width="140" />
        <el-table-column prop="temp" label="温度" width="140">
          <template #default="scope">
            <el-tag
              style="font-size: 14px"
              v-if="scope.row.temp < 30"
              type="success"
              size="large"
              effect="dark"
            >
              {{ scope.row.temp }} °C
            </el-tag>
            <el-tag
              style="font-size: 14px"
              v-if="scope.row.temp > 35"
              type="danger"
              size="large"
              effect="dark"
              >{{ scope.row.temp }} °C</el-tag
            >
            <el-tag
              style="font-size: 14px"
              v-if="scope.row.temp >= 30 && scope.row.temp <= 35"
              type="warning"
              size="large"
              effect="dark"
              >{{ scope.row.temp }} °C</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="fume" label="烟雾浓度" width="160">
          <template #default="scope">
            <el-tag
              style="font-size: 14px"
              v-if="scope.row.fume < 100"
              type="success"
              size="large"
              effect="dark"
              >{{ scope.row.fume }} μg/m³
            </el-tag>
            <el-tag
              style="font-size: 14px"
              v-if="scope.row.fume >= 100"
              type="warning"
              size="large"
              effect="dark"
              >{{ scope.row.fume }} μg/m³
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140">
          <template #default="scope">
            <el-tag
              style="font-size: 13px"
              v-if="scope.row.status === 'WARN'"
              type="warning"
              size="large"
              effect="dark"
              >警告</el-tag
            >
            <el-tag
              style="font-size: 13px"
              v-if="scope.row.status === 'FINE'"
              type="success"
              size="large"
              effect="dark"
              >良好</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-popconfirm
              v-if="scope.row.status === 'WARN'"
              cancel-button-text="取消"
              confirm-button-text="确认"
              title="确认已处理?"
              @confirm="deleteMonitor(scope.row.id)"
              icon="Warning"
            >
              <template #reference>
                <el-button
                  v-if="scope.row.isDispose === 'UNTREATED'"
                  link
                  type="danger"
                  size="small"
                >
                  未处理
                </el-button>
                <el-button
                  disabled
                  v-if="scope.row.isDispose === 'PROCESSED'"
                  link
                  type="danger"
                  size="small"
                >
                  已处理
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="padding: 10px 0 20px 20px">
      <el-pagination
        :current-page="pageNO"
        :page-size="pageSize"
        background
        @change="handlePageChange"
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  queryMonitorData,
  queryCityNameData,
  removeMonitor,
} from "@/api/monitor/index";

const dataLoading = ref(true);
const tableData = ref([]);
const city = ref("");
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
  getMonitorList();
});

//获取主要城市温度数据
const getMonitorList = () => {
  queryMonitorData(pageNo.value, pageSize.value, city.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data.data;
      total.value = res.data.total;
      dataLoading.value = false;
    }
  });
};

//监听分页
const handlePageChange = (currentNO, currentSize) => {
  pageNo.value = currentNO;
  pageSize.value = currentSize;
  getMonitorList();
};

let timeout = null;
function querySearchAsync(name, callback) {
  getMonitorList();
  queryCityNameData().then((res) => {
    if (res.code === 200) {
      const list = [];
      //封装要显示的数据
      for (let v of res.data) {
        list.push({ value: v });
      }
      const results = name ? list.filter(createFilter(name)) : list;
      // 调用 callback 返回建议列表的数据,是一个数组类型
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        callback(results);
      }, 2000 * Math.random());
    }
  });
}

const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

//搜索方法
const handleSelect = (param) => {
  city.value = param.value;
  getMonitorList();
};

//处理功能
const deleteMonitor = (id) => {
  removeMonitor(id).then((res) => {
    if (res.code === 200) {
      getMonitorList();
    }
  });
};

//导出数据
const handleExport = () => {
  window.open("http://localhost:9600/common/monitor/export");
  ElMessage({
    showClose: true,
    message: "导出成功！",
    type: "success",
  });
};

//监测数据导入
function handleExcelImportSuccess() {
  ElMessage({
    showClose: true,
    message: "导入成功！",
    type: "success",
  });
  //重新刷新页面
  window.location.reload();
}
</script>

<style scoped>
</style>